<!DOCTYPE html>
<!-- release v4.4.2, copyright 2014 - 2017 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Krajee JQuery Plugins - &copy; Kartik</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    <link href="../themes/explorer/theme.css" media="all" rel="stylesheet" type="text/css" />
    <script src="../js/plugins/sortable.js" type="text/javascript"></script>
    <script src="../js/fileinput.js" type="text/javascript"></script>
    <script src="../js/locales/zh.js" type="text/javascript"></script>
    <script src="../js/locales/es.js" type="text/javascript"></script>
    <script src="../themes/explorer/theme.js" type="text/javascript"></script>
</head>

<body>
    <div class="container kv-main">
        <form enctype="multipart/form-data">
            <input id="kv-explorer" type="file" multiple>
            <i class="glyphicon glyphicon-file kv-caption-icon"></i>
        </form>
    </div>
</body>
<script>
$(document).ready(function() {
    $("#kv-explorer").fileinput({
        uploadUrl: 'http://localhost',
        allowedFileExtensions: ['jpg', 'png', 'gif'],
        language: 'zh',
        browseOnZoneClick:true,
        maxFilesNum: 5,
        minFilesNum: 1,
        theme: 'explorer',
        overwriteInitial: false,
        initialPreviewAsData: true,
    });
});
</script>

</html>
